<template>
  <div class="inventoryDetail zy-content">
    <back-level :goPage="back" />
    <Card :title="`${$t('盘点计划')}`" class="detail-content-layout">
      <div class="titleItem">
        <div class="checkObject">
          <div class="checkObjectItem">
            <div class="checkObjectName">{{ $t('盘点计划') }}</div>
            <div class="checkObjectValue">{{ effPlanDetail.backupPlanName }}</div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName">{{ $t('盘点周期') }}</div>
            <div class="checkObjectValue">{{ effPlanDetail.triggerCycleName }}</div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName"></div>
            <div class="checkObjectValue"></div>
          </div>
        </div>
      </div>
    </Card>
    <Card :title="`${$t('盘点对象')}`" class="detail-content-layout mt16">
      <Table @on-column-width-resize="onColumnWidthResize" class="resizable-table" border :columns="columns"
             :data="effPlanDetail.backupPlanBookVoList"></Table>
    </Card>
    <Card :title="`${$t('盘点时间')}`" class="detail-content-layout mt16">
      <div class="titleItem">
        <div class="checkObject">
          <div class="checkObjectItem">
            <div class="checkObjectName">{{ $t('盘点方式') }}</div>
            <div class="checkObjectValue">{{ $t('定期盘点') }}</div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName">{{ $t('maintenance.TriggerInterval') }}</div>
            <div class="checkObjectValue">{{ effPlanDetail.triggerInterval+cycleData.find(item=>item.key===effPlanDetail.triggerCycle).name }}</div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName">{{ $t('maintenance.createTime') }}</div>
            <div class="checkObjectValue">{{ effPlanDetail.firstTime }}</div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName">{{ $t('maintenance.planEndTime') }}</div>
            <div class="checkObjectValue">{{ effPlanDetail.planEndTime }}</div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName"></div>
            <div class="checkObjectValue"></div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName"></div>
            <div class="checkObjectValue"></div>
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import toggleTableOperation from '@/mixins/toggleTableOperation'
export default {
  name: 'inventoryDetail',
  mixins: [toggleTableOperation],
  components: {},
  props: ['effPlanDetail'],
  data() {
    return {
      cycleData: [
        { name: '月', key: 3 },
        { name: '季度', key: 4 },
        { name: '半年', key: 5 },
        { name: '年', key: 6 }
      ],
      columns: [
        {
          type: 'index',
          width: 80,
          title: `${this.$t('common.index')}`,
          align: 'center',
          resizable: true
        },
        {
          title: `${this.$t('spareParts.Warehouse')}`,
          key: 'warehouseName',
          minWidth: 120,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('spareParts.Rack')}`,
          key: 'shelfConfigName',
          minWidth: 100,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('spareParts.Location')}`,
          key: 'locationConfigName',
          minWidth: 100,
          align: 'center',
          type: 'select',
          resizable: true
        },
        {
          title: `${this.$t('common.SpareNumber')}`,
          key: 'backupNo',
          minWidth: 160,
          align: 'center',
          type: 'input',
          resizable: true
        },
        {
          title: `${this.$t('common.GoodsName')}`,
          key: 'goodsName',
          minWidth: 160,
          align: 'center',
          type: 'input',
          resizable: true
        },
        {
          title: `${this.$t('spareParts.Specification')}`,
          key: 'specification',
          minWidth: 120,
          align: 'center',
          type: 'input',
          resizable: true
        },
        {
          title: `${this.$t('common.SpareClassification')}`,
          key: 'location',
          minWidth: 160,
          align: 'center',
          type: 'select',
          render: (h, params) => {
            return h('div', params.row.sparePartsABC + params.row.sparePartsVED)
          },
          resizable: true
        },
        {
          title: `${this.$t('spareParts.quantity')}`,
          key: 'quantityInStock',
          minWidth: 100,
          align: 'center',
          type: 'input',
          resizable: true
        }
      ]
    }
  },
  created() {
    this.getColumnWidth(this.columns)
  },
  methods: {
    back() {
      this.$emit('changeDetailVisible', false)
    }
  }
}
</script>
<style lang="scss">
.inventoryDetail {
  background: #fff;
  .title {
    display: flex;
    justify-content: flex-start;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    align-items: center;
    .back {
      color: #187bdb;
      font-size: 16px;
      padding-left: 20px;
      cursor: pointer;
      float: right;
    }
  }
  .titleItem {
    position: relative;
    font-size: 18px;
    padding: 0;
    .checkObject {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      font-family: 'Arial Normal', 'Arial', sans-serif;
      font-weight: 400;
      font-style: normal;
      letter-spacing: normal;
      .checkObjectItem {
        display: flex;
        flex: 33.33%;
        flex-wrap: wrap;
        .checkObjectName {
          height: 40px;
          line-height: 40px;
          width: 100%;
          border: 1px solid #eeeeee;
          background: #f5f6f7;
          text-align: left;
          padding: 0 10px;
          color: #999999;
          font-size: 13px;
        }
        .checkObjectValue {
          height: 40px;
          line-height: 40px;
          width: 100%;
          border: 1px solid #eeeeee;
          padding-left: 10px;
          color: #333333;
          font-size: 13px;
        }
      }
    }
  }
  .titleItem::before {
    display: none;
  }
}
</style>
